@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  background: url(../images/小智.png);
  background-size: cover;
}
input::-webkit-input-placeholder {
  color: white;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
.box h1 {
  color: white;
  margin-top: 10px;
}
.box .box1 {
  position: relative;
  margin: 10px;
}
.box .box1 img {
  height: 25px;
  width: 25px;
  margin: -7px;
}
.box .box1 input {
  width: 60%;
  border: none;
  outline: none;
  border-bottom: 2px solid white;
  background: transparent;
  color: white;
  font-size: 14px;
}
.box .box1 input:focus {
  border-bottom: 2px solid green;
  transition: 0.5s;
}
.box .box2 {
  position: relative;
  margin-top: 30px;
}
/*.box input[type="submit"] {
  margin-left: 15px;
  margin-bottom: 20px;
  padding: 5px;
  color: white;
  width: 200px;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.5s;
  background-image: linear-gradient(to right, red, #3498db, #2ecc71);
  background-size: 200%;
}
.box input[type="submit"]:hover {
  background-position: right;
}*/

.box button {
  margin-left: 15px;
  margin-bottom: 20px;
  padding: 5px;
  color: white;
  width: 200px;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.5s;
  background-image: linear-gradient(to right, red, #3498db, #2ecc71);
  background-size: 200%;
  outline: none;
}
.box button:hover {
  background-position: right;
}